<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>订单管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">
    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="js/vue.js"></script>


    <script src="js/data-table/bootstrap-table.js"></script>
    <script src="js/data-table/bootstrap-table-zh-CN.js"></script>

    <!--    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">-->
    <!--    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>-->
    <!--    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>-->

    <!--    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>-->
    <!--    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">-->


    <!--    不能动-->

    <script>
        function showorders() {
            $('#boottable').bootstrapTable({
                url: 'http://localhost:8080/orders/getOrder',
                method: 'GET',
                columns: [
                    {title: '订单号', field: 'no', align: 'center'},
                    {title: '总金额', field: 'goodPrice', align: 'center'},
                    {title: '订单状态', field: 'status', align: 'center', formatter: showstatus},
                    {title: '是否评论', field: 'appraiseStatus', align: 'center', formatter: showpj},
                    {title: '用户名', field: 'userName', align: 'center'},
                    {title: '创建时间', field: 'createTime', align: 'center'},
                    {title: '付款时间', field: 'payTime', align: 'center'},
                    {title: '收货地址', field: 'oaddress', align: 'center', formatter: changeaddress},
                    {title: '商品', field: 'goods', align: 'center', formatter: showGoods}

                ],
                pagination: true,
                pageSize: 4,
                pageList: [5, 10, 15, 20],
                sidePagination: 'client',
                onLoadSuccess: function (data) {
                    mergeTable(data, "#boottable");
                }
            });
        }

        $(function () {
            showorders();


        })


        function mergeTable(data, tableId) {
            let trs = $(tableId + ">tbody>tr");
            let tr = $(trs[0]);
            let tds = tr.children();
            let td = $(tds[0]);
            let count = 0;
            for (let index = 1; index < trs.length; index++) {
                tr = $(trs[index]);
                tds = tr.children();
                console.log(tr.children()[0], ":", td[0]);
                if ($(tds[0]).html() == td.html()) {
                    // $(tr.children()[0]).html("");
                    tr[0].removeChild(tds[0])
                    count++;
                    if (index == trs.length - 1) {
                        td.attr("rowspan", ++count)
                    }
                    continue;
                }
                td.attr("rowspan", ++count)
                td = $(tds[0]);
                // console.log(td.html(),":",$(tds[0]).html(),":",$(tds[0]).html() == td.html());
                count = 0;
            }
        }

        function showstatus(value) {
            let inner = "";
            if (value == 0) {
                inner = "<span class=\"label label-warning\">未支付</span>"
            } else if (value == 1) {
                inner = "<span class=\"label label-success\">已支付</span>"
            } else if (value == 2) {
                inner = "<span class=\"label label-default\">已取消</span>"
            } else if (value == 3) {
                inner = "<span class=\"label label-default\">过期</span>"
            } else if (value = 4) {
                inner = "<span class=\"label label-default\">申请退款状态</span>"
            } else if (value = 5) {
                inner = "<span class=\"label label-default\">退款中</span>"
            } else if (value = 6) {
                inner = "<span class=\"label label-default\">退款成功</span>"
            } else if (value = 7) {
                inner = "<span class=\"label label-success\">已完成</span>"
            } else if (value = 8) {
                inner = "<span class=\"label label-success\">发货中</span>"
            }
            return inner;
        }


        function showpj(value) {
            let inner = "";
            if (value == 0) {
                inner = "<span class=\"label label-warning\">未评价</span>"
            } else if (value == 1) {
                inner = "<span class=\"label label-danger\">已评价</span>"
            }
            return inner;

        }


        function showGoods(value) {
            var table = "<table border='1px'><tr><td width='300px'>商品描述</td><td>商品图片</td><td>商品价格</td><td>商品数量</td></tr>";
            for (var i = 0; i < value.length; i++) {
                table = table + '<tr><td>' + value[i].title + '</td> <td>' + '<img src="http://localhost/' + value[i].smallPic + '" width="100px"></td> <td>' + value[i].price + '</td> <td>' + value[i].stockNum + '</td></tr>'
            }
            table = table + "</table>"
            return table;
        }


    </script>
    <style>
        .table > tbody > tr > td {
            vertical-align: middle
        }

    </style>
</head>

<body>
<!--模态框-->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style="width: 760px">
        <div class="modal-content">
            <table id="addresstable" class="table table-hover table-bordered" style="text-align: center">
                <tr>
                    <td>收货人</td>
                    <td>电话号码</td>
                    <td>地址</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in addressinfo">
                    <td>{{a.aname}}</td>
                    <td>{{a.aphone}}</td>
                    <td>{{a.adetail}}</td>
                    <td v-if="a.status==1"><span class="label label-default">默认地址</span></td>
                    <td v-else><span class="label label-primary">非默认地址</span></td>
                    <td>
                        <!--                        <button type="button" class="btn btn-default"><a-->
                        <!--                                :href="'changeOrdersAdress?opr=changeAddress&addressid='+a.id">选择</a></button>-->
                        <button type="button" class="btn btn-default" :add='a.aid' onclick="updaddress(this)">选择
                        </button>

                    </td>
                </tr>
            </table>
            <div class="modal-footer" style="text-align: center">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <!--                <button class="btn btn-primary" type="button">提交</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!--<div style="height:200px"></div>-->


<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->
<div class="left-sidebar-pro">
    <!--    <img src="http://localhost/">-->
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
            <strong><a href="index.html"><img src="img/logo/logosn.png" alt=""/></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="index.html"><span class="mini-sub-pro">用户列表</span></a></li>
                            <li><a href="goodsManager.html"><span class="mini-sub-pro">商品列表</span></a></li>
                            <li><a href="order.html"><span class="mini-sub-pro">订单管理</span></a></li>
                            <li><a href="classify.html"><span class="mini-sub-pro">类目管理</span></a></li>
                            <li><a href="sc.html"><span class="mini-sub-pro">客户服务</span></a></li>
                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="adminUser.html" aria-expanded="false"><span
                                class="fa fa-user-circle-o" aria-hidden="true"></span> <span
                                class="mini-click-non">系统用户</span></a>
                    </li>
                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse"
                                                class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 col-lg-offset-6 col-md-offse-7 col-sm-offse-6 col-xs-offse-12">
                                    <div class="header-right-info">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                                   class="nav-link dropdown-toggle">
                                                    <img id="headImgs" src="img/product/pro4.jpg" alt=""
                                                         style="width: 26px;height: 26px;border-radius: 100%"/>
                                                    <span class="admin-name" id="headName"></span>
                                                    <i class="fa fa-angle-down edu-icon edu-down-arrow"></i>
                                                </a>
                                                <ul role="menu"
                                                    class="dropdown-header-top author-log dropdown-menu animated zoomIn">

                                                    <li><a onclick="logOut()"><span
                                                            class="edu-icon edu-locked author-log-ic"
                                                            style="cursor:pointer"></span>登出</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <!--            订单管理表-->
            <table id="boottable" class="table table-hover table-bordered"></table>
        </div>
    </div>
</div>


<!--不能动-->
<script>


    var vm = new Vue({
        el: '#addresstable',
        data: {addressinfo: []}
    })


    function changeaddress(value, row) {
        let userid = row.userId
        let ono = row.no
        let inner = value + "<br><button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"touid('" + userid + "','" + ono + "')\">\n" +
            " 修改地址\n" +
            "</button>";
        return inner;

    }

    function touid(userid, ono) {
        $.ajax({
            url: 'http://localhost:8080/orders/touid',
            type: 'GET',
            dataType: 'json',
            data: {
                userid: userid,
                ono: ono,
                opr: "touid"
            },
            success: function (data) {
                vm.addressinfo = data
                console.log(vm.addressinfo)
            }
        })
    }

    function updaddress(btn) {
        $("#myModal").modal("hide")
        var btn1 = $(btn)
        var aid = btn1.attr('add')
        console.log(aid);
        $.ajax({
            url: 'http://localhost:8080/orders/updaddress',
            type: 'GET',
            dataType: 'json',
            data: {
                aid: aid
            },
            success: function (data) {
                console.log("修改成功")
                $('#boottable').bootstrapTable("destroy");
                showorders();

            },
            complete: function () {
                console.log("请求完成");
            },
            error: function (msg) {
                console.log("error", msg);
            }
        })

    }


    // var vm = new Vue({
    //     el: '#ordertable',
    //     data: {orderinfo: []}
    //
    // })
    // $.ajax({
    //     url: 'http://localhost:8080/showOrders',
    //     type: 'post',
    //     dataType: 'json',
    //     success:function (data) {
    //         vm.orderinfo=data
    //         console.log(vm.orderinfo)
    //     }
    // })


    // $(function () {
    //     $.ajax({
    //         url: 'http://localhost:8080/showOrders',
    //         type: 'post',
    //         dataType: 'json',
    //         success: function (data) {
    //             for (i in data) {
    //                 var tr;
    //                 tr = '<td>' + data[i].id + '</td>' + '<td>' + data[i].no + '</td>' + '<td>' + data[i].goodPrice + '</td>' + '<td>' + data[i].num + '</td>' + '<td>' + data[i].status + '</td>' + '<td>' + data[i].appraiseStatus + '</td>' + '<td>' + data[i].userId + '</td>' + '<td>' + data[i].createTime + '</td>' + '<td>' + data[i].payTime + '</td>' + '<td>' + data[i].goodId + '</td>' + '<td>' + data[i].goodImg + '</td>' + '<td>' + data[i].goodTitle + '</td>'
    //
    //                 $("#ordertable").append('<tr>' + tr + '</tr>')
    //             }
    //         }
    //     })
    // })
</script>


<!-- jquery
    ============================================ -->
<!--<script src="js/vendor/jquery-1.12.4.min.js"></script>-->
<!-- bootstrap JS
    ============================================ -->
<script src="js/bootstrap.min.js"></script>
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- wow JS
    ============================================ -->
<script src="js/wow.min.js"></script>
<!-- price-slider JS
    ============================================ -->
<script src="js/jquery-price-slider.js"></script>
<!-- meanmenu JS
    ============================================ -->
<script src="js/jquery.meanmenu.js"></script>
<!-- owl.carousel JS
    ============================================ -->
<script src="js/owl.carousel.min.js"></script>
<!-- sticky JS
    ============================================ -->
<script src="js/jquery.sticky.js"></script>
<!-- scrollUp JS
    ============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- counterup JS
    ============================================ -->
<script src="js/counterup/jquery.counterup.min.js"></script>
<script src="js/counterup/waypoints.min.js"></script>
<script src="js/counterup/counterup-active.js"></script>
<!-- mCustomScrollbar JS
    ============================================ -->
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/scrollbar/mCustomScrollbar-active.js"></script>
<!-- metisMenu JS
    ============================================ -->
<script src="js/metisMenu/metisMenu.min.js"></script>
<script src="js/metisMenu/metisMenu-active.js"></script>
<!-- morrisjs JS
    ============================================ -->
<script src="js/morrisjs/raphael-min.js"></script>
<script src="js/morrisjs/morris.js"></script>
<script src="js/morrisjs/home3-active.js"></script>
<!-- morrisjs JS
    ============================================ -->
<script src="js/sparkline/jquery.sparkline.min.js"></script>
<script src="js/sparkline/jquery.charts-sparkline.js"></script>
<script src="js/sparkline/sparkline-active.js"></script>
<!-- calendar JS
    ============================================ -->
<script src="js/calendar/moment.min.js"></script>
<script src="js/calendar/fullcalendar.min.js"></script>
<script src="js/calendar/fullcalendar-active.js"></script>
<!-- plugins JS
    ============================================ -->
<script src="js/plugins.js"></script>
<!-- main JS
    ============================================ -->
<script src="js/main.js"></script>
<!-- tawk chat JS
    ============================================ -->
<!--<script src="js/tawk-chat.js"></script>-->
</body>

</html>
<script src="js/my/logOut.js"></script>
<script src="js/my/headImgAndName.js"></script>